<template>
  <el-radio-group :model-value="modelValue" @update:modelValue="updateValue">
    <el-radio-button
      v-for="item in data"
      :key="item.site_id"
      :label="item.site_id"
    >
      {{ item.region_name }}
    </el-radio-button>
  </el-radio-group>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import { pageMySites } from '@/api/company';

  const emit = defineEmits(['update:modelValue']);

  const props = defineProps({
    /** 选中的区域ID */
    modelValue: [Number, String] // 允许数字或字符串
  });

  /** 站点数据 */
  const data = ref([]);

  /** 更新选中数据 */
  const updateValue = (value) => {
    emit('update:modelValue', value);
  };

  /** 获取站点数据并设置默认值 */
  const loadSites = async () => {
    try {
      const res = await pageMySites({ all: 1 });
      data.value = res || [];

      // 如果有数据，并且 `modelValue` 为空，则默认选中第一个 id
      if (data.value.length > 0 && !props.modelValue) {
        emit('update:modelValue', data.value[0].site_id);
      }
    } catch (e) {
      EleMessage.error(e.message);
    }
  };

  onMounted(loadSites);
</script>
